<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>幸运抽奖活动</title>
<!--    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>-->
    <script src="js/jquery.min.js"></script>

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Microsoft YaHei', 'Segoe UI', sans-serif;
        }

        body {
            background-color: #f8f9fa;
            color: #333;
            line-height: 1.6;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

        header {
            text-align: center;
            margin-bottom: 30px;
            padding: 20px;
            background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
            border-radius: 10px;
            color: white;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

        header h1 {
            font-size: 2.2rem;
            margin-bottom: 10px;
        }

        .content {
            display: flex;
            gap: 25px;
        }

        .prizes-section, .users-section {
            background: white;
            border-radius: 10px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
            padding: 20px;
            flex: 1;
            transition: transform 0.3s ease;
        }

        .prizes-section:hover, .users-section:hover {
            transform: translateY(-5px);
        }

        .section-title {
            font-size: 1.4rem;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 2px solid #e9ecef;
            color: #2c3e50;
        }

        .tier-section {
            margin-bottom: 30px;
        }

        .tier-header {
            display: flex;
            align-items: center;
            background-color: #e9ecef;
            padding: 8px 15px;
            border-radius: 6px;
            margin-bottom: 15px;
        }

        .tier-title {
            font-weight: bold;
            font-size: 1.2rem;
            color: #212529;
        }

        .prizes-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
            gap: 20px;
        }

        .prize-card {
            border-radius: 8px;
            overflow: hidden;
            background: #f8f9fa;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
            transition: all 0.3s ease;
        }

        .prize-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

        .prize-image {
            width: 100%;
            height: 160px;
            background-color: #e9ecef;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }

        .prize-image img {
            max-width: 100%;
            max-height: 100%;
            object-fit: cover;
        }

        .prize-details {
            padding: 15px;
        }

        .prize-name {
            font-weight: 600;
            margin-bottom: 8px;
            color: #212529;
            font-size: 1.1rem;
        }

        .prize-amount {
            color: #6c757d;
            font-size: 0.9rem;
        }

        .users-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 0.95rem;
        }

        .users-table th {
            background-color: #e9ecef;
            padding: 12px 15px;
            text-align: left;
            font-weight: 600;
            color: #495057;
        }

        .users-table td {
            padding: 12px 15px;
            border-bottom: 1px solid #e9ecef;
        }

        .users-table tr:hover {
            background-color: #f8f9fa;
        }

        .user-id {
            color: #6c757d;
        }

        .tier-特等奖 { color: #dc3545; }
        .tier-一等奖 { color: #fd7e14; }
        .tier-二等奖 { color: #ffc107; }
        .tier-三等奖 { color: #28a745; }
        .tier-四等奖 { color: #17a2b8; }
        .tier-五等奖 { color: #20c997; }

        .tier-bg-特等奖 { background-color: #fff0f0; }
        .tier-bg-一等奖 { background-color: #fff7e6; }
        .tier-bg-二等奖 { background-color: #fffce6; }
        .tier-bg-三等奖 { background-color: #f0fff4; }
        .tier-bg-四等奖 { background-color: #e6f7ff; }
        .tier-bg-五等奖 { background-color: #e9f7e9; }

        .loading {
            text-align: center;
            padding: 30px;
            color: #6c757d;
        }

        .loading-spinner {
            border: 4px solid #f3f3f3;
            border-top: 4px solid #3498db;
            border-radius: 50%;
            width: 30px;
            height: 30px;
            animation: spin 1s linear infinite;
            margin: 0 auto 15px;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .error-message {
            background-color: #fff0f0;
            color: #dc3545;
            padding: 15px;
            border-radius: 6px;
            margin-bottom: 20px;
            border-left: 4px solid #dc3545;
        }

        @media (max-width: 900px) {
            .content {
                flex-direction: column;
            }
        }
    </style>
</head>
<body>
<div class="container">
    <header>
        <h1>幸运抽奖活动</h1>
        <p>参与抽奖即有机会赢取精美大奖，祝您好运！</p>
    </header>

    <div id="content-area">
        <div class="loading">
            <div class="loading-spinner"></div>
            <p>正在加载活动数据...</p>
        </div>
    </div>
</div>

<script>

    var params = new URLSearchParams(window.location.search);
    var activityId = params.get('activityId');
    var userToken = localStorage.getItem("user_token");

    function getActivityInfo(){
        $.ajax({
            url: '/activity-detail/find',
            type: 'GET',
            data: { activityId: activityId },
            dataType: 'json',
            headers: {
                'user_token': userToken
            },
            success: function(result) {
                if (result.code != 200) {
                    alert("获取活动详情失败！" + result.msg);
                } else {
                    users = result.data.users;
                    prizes = result.data.prizes;
                    renderPage(prizes,users);
                }
            },
            error:function(err){
                console.log(err);
                handleError();
                if(err!=null && err.status==401){
                    alert("用户未登录, 即将跳转到登录页!");
                    // 已经被拦截器拦截了, 未登录
                    location.href ="/blogin.html";
                }
            }
        })
    }
    // 渲染页面内容
    function renderPage(prizes, users) {
        // 清除加载提示
        $("#content-area").empty();

        // 创建页面结构
        const content = `
                    <div class="content">
                        <div class="prizes-section">
                            <h2 class="section-title">奖品展示</h2>
                            <div id="prizes-container"></div>
                        </div>

                        <div class="users-section">
                            <h2 class="section-title">参与抽奖人员</h2>
                            <div class="users-table-container">
                                <table class="users-table">
                                    <thead>
                                        <tr>
                                            <th>用户ID</th>
                                            <th>用户名</th>
                                        </tr>
                                    </thead>
                                    <tbody id="users-list"></tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                `;

        $("#content-area").html(content);

        // 渲染奖品数据
        renderPrizes(prizes);

        // 渲染用户数据
        renderUsers(users);
    }

    // 渲染奖品（根据字符串类型的prizeTier分组）
    function renderPrizes(prizes) {
        // 按奖项等级分组
        const tiers = {};

        prizes.forEach(prize => {
            if (!tiers[prize.prizeTier]) {
                tiers[prize.prizeTier] = [];
            }
            tiers[prize.prizeTier].push(prize);
        });

        let prizesHtml = '';

        // 预定义奖项顺序（可扩展）
        const tierOrder = ["特等奖", "一等奖", "二等奖", "三等奖", "四等奖", "五等奖"];

        // 按优先级展示奖项
        tierOrder.forEach(tierName => {
            if (tiers[tierName]) {
                prizesHtml += `
                            <div class="tier-section">
                                <div class="tier-header tier-bg-${tierName}">
                                    <span class="tier-title tier-${tierName}">
                                        ${tierName}
                                    </span>
                                </div>
                                <div class="prizes-container">
                        `;

                tiers[tierName].forEach(prize => {
                    prizesHtml += `
                                <div class="prize-card">
                                    <div class="prize-image">
                                        <img src="/lottery-picture/${prize.imageUrl}" alt="${prize.name}">
                                    </div>
                                    <div class="prize-details">
                                        <h3 class="prize-name">${prize.name}</h3>
                                        <div class="prize-amount">总数量：${prize.prizeAmount}</div>
                                    </div>
                                </div>
                            `;
                });

                prizesHtml += `
                                </div>
                            </div>
                        `;
            }
        });

        $("#prizes-container").html(prizesHtml);
    }

    // 渲染用户列表
    function renderUsers(users) {
        let usersHtml = '';

        users.forEach(user => {
            usersHtml += `
                        <tr>
                            <td class="user-id">${user.id}</td>
                            <td>${user.userName}</td>
                        </tr>
                    `;
        });

        $("#users-list").html(usersHtml);
    }

    // 错误处理
    function handleError() {
        $("#content-area").html(`
                    <div class="error-message">
                        <h3>数据加载失败</h3>
                        <p>无法连接到服务器，请稍后再试。</p>
                    </div>
                `);
    }
    getActivityInfo();
    $(document).ready(function() {
        // AJAX请求获取数据
        function fetchData() {
            // 模拟API请求延迟
            setTimeout(() => {
                // 模拟的API响应数据（实际使用时替换为后端返回的数据）
                const response = {
                    prizeList: [
                        {
                            name: "MacBook Pro",
                            imageUrl: "https://images.unsplash.com/photo-1496181133206-80ce9b88a853?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8bWFjYm9va3xlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=500&q=60",
                            prizeTier: "特等奖",
                            prizeAmount: 1
                        },
                    ],
                    userList: [
                        { id: "U001", userName: "张三" },
                        { id: "U002", userName: "李四" },
                    ]
                };

                // 渲染页面内容
                renderPage(response.prizeList, response.userList);
            }, 1000);
        }

        /*
        $.ajax({
            url: "https://api.example.com/lottery-data",
            type: "GET",
            dataType: "json",
            success: function(data) {
                renderPage(data.prizeList, data.userList);
            },
            error: function() {
                handleError();
            }
        });
        */
    });
</script>
</body>
</html>
